<script setup>
import logo from "@/assets/logo.svg";
import ChatBox from "@/components/chat-box.vue";
import {defineEmits, defineExpose, ref} from "vue";
import {creatNewChat} from '@/api/http/chat.js';
import {systemInfo, userInfo} from '@/stores/userStore.js'


const chatFormData = ref({});
const emit = defineEmits(['chooseDetail'])

const changeHistory = (params) => {
  //step 1 创建新对话
  creatNewChat({
    ...params,
    "operateId": userInfo().userId,
    "operateName": userInfo().userName
  }).then(res => {
    systemInfo().requestId = res.data.data;
    //step 2 刷新历史列表
    emit('chooseDetail', {
      "chatId": systemInfo().requestId,
      "message": chatFormData.value.userMessage,
    });
  })

}

defineExpose({
  chatFormData
})
</script>

<template>

  <div style="display: flex;align-items: center;flex-direction: column;justify-content: center;height: 100%">
    <div style="display: flex">
      <el-image :src="logo" style="height: 4em"/>
      <el-text size="large" style="font-size: xx-large">{{ $t('chatNew1') }}</el-text>
    </div>
    <el-text>{{ $t('chatNew2') }}</el-text>
    <el-text type="info">{{ $t('chatNew3') }}</el-text>
    <br/>
    <chat-box
        @handleMessage="changeHistory"
        v-model:fromVal="chatFormData"></chat-box>
  </div>


</template>

<style scoped lang="scss">

</style>